import { ref } from "vue";
export function useColumns() {
  const dataList = ref([]);
  const columns: TableColumnList = [
    {
      label: "货物名称",
      prop: "goodsName",
      cellRenderer: ({ row }) => <el-input v-model={row.goodsName} />
    },
    {
      label: "货物货号",
      prop: "goodsNo",
      cellRenderer: ({ row }) => <el-input v-model={row.goodsNo} />
    },
    {
      label: "分类",
      prop: "category",
      cellRenderer: ({ row }) => <el-input v-model={row.category} />
    },
    {
      label: "货物规格",
      prop: "goodsSpec",
      cellRenderer: ({ row }) => <el-input v-model={row.goodsSpec} />
    },
    {
      label: "货物价值",
      prop: "goodsCost",
      cellRenderer: ({ row }) => (
        <el-input-number
          controls={false}
          v-model={row.goodsCost}
          precision={2}
          type="number"
          min={0.01}
        />
      ),
      minWidth: 100
    },
    {
      label: "数量",
      prop: "goodsNum",
      cellRenderer: ({ row }) => (
        <el-input type="number" min={1} v-model={row.goodsNum} />
      )
    },
    {
      label: "操作",
      fixed: "right",
      width: 90,
      slot: "operation"
    }
  ];

  function onAdd() {
    dataList.value.push({
      id: dataList.value.length + 1,
      goodsName: "",
      goodsNo: "",
      category: "",
      goodsSpec: "",
      goodsCost: null,
      goodsNum: 1
    });
  }

  function onDel(row) {
    const index = dataList.value.indexOf(row);
    if (index !== -1) dataList.value.splice(index, 1);
  }

  return {
    columns,
    dataList,
    onAdd,
    onDel
  };
}
